<script lang="ts" setup>
import SiteFormModal from '@/component/SiteFormModal/SiteFormModal.vue'
import SiteItem from '@/component/SiteList/SiteItem.vue'
import { SiteList } from '@/component/SiteList/SiteList.ts'
import { useGeneralSettingStore } from '@/config/store/UseGeneralSettingStore.ts'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'

const props = withDefaults(
        defineProps<{
            groupId: string
        }>(),
        {},
)
const emits = defineEmits<{
    (event: 'change', value: Array<string>): void
}>()

const siteListRef = ref<HTMLElement | null>(null)
const { list, initList, findChanges } = new SiteList(props, siteListRef)

const { showCreateBtn, enableDrag } = storeToRefs(useGeneralSettingStore())

defineExpose({
    initList,
})
</script>

<template>
<div ref="siteListRef" class="site-list" role="contentinfo">

    <VueDraggable
            v-model="list"
            :animation="150"
            :disabled="!enableDrag"
            draggable=".site-item"
            ghostClass="ghost"
            @end="findChanges"
            class="draggable-container"
    >
        <template v-for="i in list" :key="i.id!">
            <SiteItem :group-id="groupId" :site="i" @change="v => emits('change', v)" />
        </template>

        <section v-if="showCreateBtn" class="add-btn">
            <SiteFormModal :group-id="groupId" is-add @change="initList" />
        </section>
    </VueDraggable>
</div>
</template>

<style lang="scss" scoped>
.site-list {
    .draggable-container {
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-content: flex-start;
        align-items: stretch;
    }
}

:deep(section) {
    color: #FFF;
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
    margin: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    cursor: pointer;

    backdrop-filter: blur(20px);

    a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .name {
        text-align: center;
        padding: 5px 10px;
    }

    .arco-avatar,
    .arco-image-error {
        background-color: unset;
    }
}

.add-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 50px;
}
</style>
